
<template>
    
<div id="view">

  
    
 <el-row>
  <el-col :span="2" >
    <div class="grid-content bg-purple-dark">
         <el-button type="primary" @click="up" style="height:50px;width:140px;font-size:22px;">修改资料</el-button>
    </div>
 </el-col>  
  <el-col :span="18" offset="2">
    <div id="div_info">
      <table class="viewTable" style="border:0px solid black;" >
                <tr>
                    <td class="leftTd">头像</td>
                    <td class="rightTd">
                    <div class="demo-basic--circle">
                    <div class="block">
                      <el-avatar :size="70"
                     :src="this.$imgHost+img" id="img" style="vertical-align: middle;"></el-avatar></div>
                    </div>
                    </td>
                </tr>
                <tr>
                    <td class="leftTd">昵称</td>
                    <td class="rightTd">{{userName}}</td>
                </tr>
                <tr>
                    <td class="leftTd">真实姓名</td>
                    <td class="rightTd">{{realName}}</td>
                </tr>
                
                <tr>
                    <td class="leftTd">性别</td>
                    <td class="rightTd">{{sex}}</td>
                </tr>
                <tr>
                    <td class="leftTd">出生日期</td>
                    <td class="rightTd">{{birthday}}</td>
                </tr>
                <tr>
                    <td class="leftTd">联系电话</td>
                    <td class="rightTd">{{studentPhone}}</td>
                </tr>
            </table>
  </div></el-col>
   
</el-row>


<!--修改个人资料弹窗-->
<el-dialog
        title="修改个人资料"
        :visible.sync="updateTag"
        :close-on-click-modal="false" top="50px">
        <el-form lalel-width="100px"
        >
        <el-form-item label="头像">
               <el-upload
                    class="avatar-uploader"
                    action="http://localhost:9090/user/uploadImg"
                    :show-file-list="false"
                    :on-success="handleSuccess"
                    name="img"
                    >
                    <img v-if="img" :src="this.$imgHost+img" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    
                    </el-upload>
            </el-form-item>
        
            <el-form-item label="昵称" >
                <el-input v-model="userName2" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="真实姓名" >
                <el-input v-model="realName2" ></el-input>
            </el-form-item>

            <el-form-item label="密码" >
                <el-input v-model="passWord2" show-password></el-input>
            </el-form-item>

            <el-form-item label="确认密码" >
                <el-input v-model="passWord2" show-password></el-input>
            </el-form-item>

            

            <el-form-item label="性别">
                <el-radio-group v-model="sex2">
                    <el-radio label="男">男</el-radio>
                    <el-radio label="女">女</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="出生日期">
                <el-date-picker v-model="birthday2" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="联系电话" >
                <el-input v-model="studentPhone2" ></el-input>
            </el-form-item>

            

        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button @click="updateTag = false">取 消</el-button>
            <el-button type="primary" @click="update()">确 定</el-button>
        </span>
        </el-dialog>

</div>

</template>


<script>
  export default {
    name:'viewInfo',
    data() {
      // //自定义校验器
      //    var validatepwd = (value, callback) => {
      //   if (value === '') {
      //     callback(new Error('请再次输入密码'));
      //   } else if (value !== this.passWord) {
      //     callback(new Error('两次输入密码不一致!'));
      //   } else {
      //     callback();
      //   }
      // };
      return {
          userId:this.$store.state.userList1[0].userId,
          userName:this.$store.state.userList1[0].userName,
          realName:this.$store.state.userList1[0].realName,
          passWord:this.$store.state.userList1[0].passWord,
          
          studentPhone:this.$store.state.userList1[0].studentPhone,
          sex:this.$store.state.userList1[0].sex,
          birthday:this.$store.state.userList1[0].birthday,
          img:this.$store.state.userList1[0].img,
          img1:'',
          passWord2:this.$store.state.userList1[0].passWord,
          
          userId2:'',
          userName2:'',
          realName2:'',
          passWord2:'',
          studentPhone2:'',
          sex2:'',
          birthday2:'',

          // passWord2:[
          //           {validator:validatepwd}
          //       ],
          updateTag:false,

          uploadImg:"http://localhost:9090/user/uploadImg",
          


      }
    },
    methods: {
       
     up(){
          this.userId2=this.$store.state.userList1[0].userId,
          this.userName2=this.$store.state.userList1[0].userName,
          this.realName2=this.$store.state.userList1[0].realName,
          this.passWord2=this.$store.state.userList1[0].passWord,
          this.studentPhone2=this.$store.state.userList1[0].studentPhone,
          this.sex2=this.$store.state.userList1[0].sex,
          this. birthday2=this.$store.state.userList1[0].birthday,

      this.updateTag=true;
     },

//添加
      add(){
          
        },

        //个人资料修改
        update(){
          
            console.log(this.img1);
            console.log(this.userId2);
            var url = "/user/changeInfo";
            var params = new URLSearchParams();
            params.append("userid",this.userId2);
            params.append("username",this.userName2);
            params.append("password",this.passWord2);
            params.append("realname",this.realName2);
            params.append("sex",this.sex2);
            params.append("birthday",this.birthday2);
            params.append("img",this.img1);
            params.append("studentphone",this.studentPhone2);
 
            this.$axios.post(url,params).then(resp=>{
              //el-dialog关闭
              this.updateTag=false;
              this.$message({
                message:"修改成功！"
              });
              //将查询到的用户数据存储到浏览器                     
                  // this.$store.dispatch(actions.js层的函数名,参数),  来调用方法
         	          this.$store.dispatch("login1",resp.data.data);
                    //页面刷新
                    //this.$router.go(0);
                    location.reload();

            })
        },
        //图片上传
        handleSuccess(resp,file,fileList){
            file.url=resp.data;
            this.img=file.url;
            //将上传后的路径设置到url属性
            this.img=resp.data;
            this.img1=resp.data;
            console.log(img1)
        },

   },
   
   mounted() {
    
   }
  }
</script>

<style scoped>


tr{
   border-bottom: 2px solid rgb(161, 159, 159);

}


#div_info{
height:700px;
width:1200px;
border:1px solid white;
background-color: white;
border-radius: 10px;
}

 #view{
    margin-left: 50px;
    margin-top:50px;
 }

/*个人资料表格样式 */
.viewTable{
    width:700px;
    height:200px;
    margin:auto;
    margin-top: 100px;
    font-size: 20px;
    line-height: 80px;
    border-collapse: collapse;
}

.leftTd{
    text-align: left;
    padding-left:10px;
}
.rightTd{
    text-align: right;
    padding-right: 10px;
}



  .file {
    position: relative;
    width: 100px;
    height: 100px;
     left: 40px;
    background-color:white;
  }
  .updata {
    display: block;
    height: 100%;
    width: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 40px;
    z-index: 10;
    background-color: black;
  }
  .img {
    position: absolute;
    top: 0;
    left: 40px;
    width: 100px;

  }

  
.avatar-uploader-icon, .avatar {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader-icon:hover, .avatar:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }



 
</style>